<template>
  <div>
    <el-row>
      <el-card>
        <el-form>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="员工账号">
                  <el-input
                    style="width: 70%"
                    v-model="formData.id"
                    placeholder="请输入员工账号"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="员工姓名">
                  <el-input
                    style="width: 70%"
                    placeholder="请输入员工姓名"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="工作模式">
                  <el-input
                    placeholder="请选择工作模式"
                    style="width: 70%"
                  ></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="月份">
                  <el-input
                    placeholder="请选择月份"
                    style="width: 70%"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="所属机构">
                  <el-input
                    style="width: 70%"
                    placeholder="请选择所属机构"
                    v-model="formData.name"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8">
              <el-button type="primary" @click="submit">搜索</el-button>
              <el-button @click="chongzhi">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-card style="margin-top: 20px">
        <el-col :span="2">
          <el-button @click="Paiban" type="primary" size="medium"
            >排版设置</el-button
          >
        </el-col>
        <el-col :span="22">
          <el-button @click="PaiBanchange" size="medium">绑定排版</el-button>
        </el-col>
        <el-col>
          <el-table
            border
            stripe
            style="text-align: center; margin-top: 15px; margin-bottom: 20px"
            :data="tableDate"
            @selection-change="handleSelectionChange"
          >
            >
            <el-table-column
              fixed
              label="序号"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column
              fixed
              width="120"
              prop="employeeNumber"
              label="员工账号"
            ></el-table-column>
            <el-table-column
              fixed
              width="120"
              prop="name"
              label="员工姓名"
            ></el-table-column>
            <el-table-column
              fixed
              width="120"
              prop="phone"
              label="员工电话"
            ></el-table-column>
            <el-table-column fixed width="120" label="员工角色">
              <template #default="{ row }">
                {{
                  row.userType === 1
                    ? "员工"
                    : row.userType === 2
                    ? "快递员"
                    : "司机"
                }}
              </template>
            </el-table-column>
            <el-table-column
              fixed
              width="120"
              prop="workPatternName"
              label="当前工作模式"
            ></el-table-column>
            <el-table-column
              v-for="item in 31"
              :label="String(item)"
              :key="item"
            >
              <template #default="{ row }">
                <span
                  v-if="row.workPatternName"
                  :class="row.workSchedules[item - 1] ? 'span1' : 'span2'"
                >
                  {{ row.workSchedules[item - 1] ? "上" : "休" }}
                </span>
                <span v-else class="span2">无</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-bottom: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="this.page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog width="500px" @close="close" :visible="isDone" title="人工调整">
      <el-form style="margin-left: 60px">
        <el-form-item>
          <el-radio @input="radioChange('1')" v-model="radio" label="1"
            >礼拜制</el-radio
          >
          <el-radio @input="radioChange('2')" v-model="radio" label="2"
            >连续制</el-radio
          >
        </el-form-item>
        <el-form-item label="模式名称">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.name === '' ? item.id : item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button type="primary">确定</el-button>
        <el-button @click="close" style="margin-left: 50px">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getPanBanListApi, getPanBanWorkApi } from "@/api/employee";

export default {
  data() {
    return {
      value: "",
      isDone: false,
      radio: "1",
      formData: [],
      tableDate: [],
      checkDate: [],
      optionsDate: {},
      options: [],
      total: 100,
      page: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getPaiBanInfo();
  },
  methods: {
    submit() {},
    chongzhi() {},
    radioChange(num) {
      if (num === "1") {
        this.options = this.optionsDate["1"];
      } else if (num === "2") {
        this.options = this.optionsDate["2"];
      }
    },
    close() {
      this.isDone = false;
    },
    PaiBanchange() {
      if (this.checkDate.length === 0) {
        this.$message.error("请选择调整人员");
        return;
      } else {
        this.options = this.optionsDate["1"];
        this.isDone = true;
      }
    },
    handleSelectionChange(val) {
      this.checkDate = val;
      // console.log(val);
    },
    Paiban() {
      this.$router.push("/Paiban");
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getPaiBanInfo();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getPaiBanInfo();
    },
    async getPaiBanInfo() {
      const res = await getPanBanListApi(this.page);
      console.log(res.data.data);
      this.total = +res.data.data.counts;
      this.tableDate = res.data.data.items;
      const res2 = await getPanBanWorkApi();
      this.optionsDate = res2.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  ::v-deep .el-form-item__label {
    width: 68px;
  }
}
.el-pagination {
  text-align: center;
}
.el-table .cell .span1 {
  text-align: center;
  display: inline-block;
  height: 22px;
  width: 22px;
  color: rgb(225, 85, 54);
  border-radius: 50%;
  border: 1px solid rgb(225, 85, 54);
  background-color: rgb(255, 238, 235);
}
.el-table .cell .span2 {
  text-align: center;
  display: inline-block;
  height: 22px;
  width: 22px;
  color: black;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: rgb(239, 243, 248);
}
</style>
